<template>
    <div class="course">

        <mu-appbar :title="title">
            <mu-icon-button @click="$router.back(-1);" icon="navigate_before" slot="left"/>
            <mu-icon-button icon="search" slot="right" :to="{ name :'Search'}" />
        </mu-appbar>

        <div v-if="course.isEncrypt != 0 && course.select == 0 ">
            <!-- 如果课程有密码，并且我还没有加入课程 -->

            <mu-row gutter style="padding:2rem 5rem; ">
                <mu-col width="100" tablet="50" desktop="33">
                    <mu-text-field label="输入课程密码" v-model="password" hintText="请输入课程密码" type="password" labelFloat/>
                </mu-col>
                <mu-col width="100" tablet="50" desktop="33">
                    <div style="color: red; margin-bottom: 10px;">{{ passwordErrors }}</div>
                    <mu-raised-button label="确认输入" :disabled="!valid"  class="demo-raised-button" primary fullWidth @click="submit" />
                </mu-col>
            </mu-row>

        </div>
        <div v-else>
            <keep-alive>
                <component :is="showvideo"></component>
            </keep-alive>

            <mu-tabs class="course-tabs" :value="activeTab" @change="handleTabChange">
                <mu-tab value="detail" title="详情"/>
                <mu-tab value="catalog" title="目录"/>
                <mu-tab value="discuss" title="讨论"/>
                <mu-tab value="note" title="笔记"/>
            </mu-tabs>

            <keep-alive>
                <component :is="which_to_show"></component>
            </keep-alive>
        </div>

    </div>
</template>

<script>

  import Catalog from './Catalog';
  import CourseInfo from './CourseInfo';
  import ShowVideo from './Video';

  export default {
    name: 'Course',
    created() {
      this.title = this.$route.params.title
      this.$store.dispatch('getCourseInfo', this.$route.params.id);
      this.course = this.$store.state.course;
      console.log(this.course);
    },
    data() {
      return {
        title: '',
        showvideo:'showvideo',
        password: '',
        passwordErrors: '',
        valid: true,
        which_to_show: Catalog,
        course: '',
        activeTab: 'catalog',
      }
    },
    methods: {
      submit() {
        let course = this.$store.state.course;
        this.valid = false;
        if (this.password == course.isEncrypt) {
          console.log('加入课程成功');
          //加入课程的操作
          this.$store.dispatch('addCourse', course);

        } else {
          this.valid = true;
          this.passwordErrors = '课程密码错误，请重新输入';
        }
      },
      handleTabChange(val) {
        this.which_to_show = val;
        this.activeTab = val;
      },
    },
    components: {
      detail: CourseInfo,
      catalog: Catalog,
      showvideo: ShowVideo,
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .course-tabs {
        background: #efefef;
        color: #333;
        position: fixed;
        top: 250px;
        z-index: 100;
    }

    .mu-tab-link {
        color: #666;
    }

    .catalog-component {
        margin-top: 240px;
    }
</style>
